<template>
	<el-dialog v-model="props.isShow" width="28%" @close="handleClose" :show-close="false"
		class="transaction-spot-dialog-dark">
		<template #default>
			<div class="flex items-center justify-between mb-10px">
				<div class="flex items-start">
					<div class="ml-10px">
						<img :src="props.icon" class="w-24px h-24px">
					</div>
					<p class="ml-20px text-18px text-#ffffff">{{ props.title }}</p>
				</div>
				<el-icon color="#fff" size="18px">
					<CloseBold />
				</el-icon>
			</div>
		</template>

	</el-dialog>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
interface IProps {
	isShow: boolean;
	icon: string;
	title: string;
}

const props = defineProps<IProps>();
const emit = defineEmits(['close'])

const handleClose = () => {
	emit('close', false);
}
</script>
<style lang="scss">
.transaction-spot-dialog-dark {
	background: #2B2B2B;
}
</style>
